<template>
  <div>
    <!--    面包屑-->
    <div class="mianbaoxie">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="position:fixed;top: 13%">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box_table">
      <!--查询的东西-->
      <div>
        <el-form >
          输入搜索:
          <el-input v-model="brandName" placeholder="品牌名称/关键词" style="width: 25%"></el-input>
          <!--          <el-select v-model="value" clearable placeholder="商品状态">-->
          <!--            <el-option-->
          <!--                v-for="item in options"-->
          <!--                :key="item.value"-->
          <!--                :label="item.label"-->
          <!--                :value="item.value">-->
          <!--            </el-option>-->
          <!--          </el-select>-->
          <el-button type="primary" plain @click="getAllItem">查找</el-button>
        </el-form>
      </div>
      <!--    表格-->

      <el-table
          :data="itemTableData"
          style="width: 100%;">
        <el-table-column
            prop="id"
            label="序号"
            width="50">
        </el-table-column>
        <el-table-column
            prop="itemCode"
            label="编号"
            width="100">
        </el-table-column>
        <el-table-column
            prop="itemName"
            label="商品名称"
            width="100">
        </el-table-column>
        <el-table-column
            label="商品图片">
          <template v-slot="s">
            <el-avatar shape="square" size="large" :src="s.row.itemImg"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
            prop="cate.name"
            label="商品分类">
          <template v-slot="s">
            <el-link type="primary" @click="commodity(s.row)">查看分类</el-link>
          </template>
        </el-table-column>
        <el-table-column
            prop="column.ccname"
            label="商品栏目">
          <!--        <el-button type="primary" plain>查看栏目</el-button>-->
        </el-table-column>
        <el-table-column
            prop="itemColumn"
            label="商品品牌"
            width="80">
          <template v-slot="s">
            {{s.row.brand.brandName}}
          </template>
        </el-table-column>
        <el-table-column
            label="商品评价"
        >
          <template v-slot="s">
            <div style="height: 70px;">
              <el-badge :value="s.row.num" class="item" style="margin-top: 10px" v-if="s.row.num!=0">
                <el-button @click="viewComment(s.row)">评论</el-button>
              </el-badge>
              <div v-if="s.row.num==0" >暂无评价</div>
            </div>
          </template>
          <!--        <el-button type="primary" plain @click="viewComment(s.row)">查看评价</el-button>-->
        </el-table-column>
        <el-table-column
            prop="itemSellingPrice"
            label="价格/货号">
        </el-table-column>
        <el-table-column
            label="物流">
          <template v-slot="s">
            {{s.row.itemLogisticsType1.logisticsType}}
          </template>
        </el-table-column>
        <el-table-column
            prop="itemBrandId"
            label="SKU库存">
        </el-table-column>
        <el-table-column
            label="是否上架">
          <template slot-scope="scope">
            <!--switch 开关 组件-->
            <el-switch
                @change="alterSwitch(scope.row)"
                :active-value="true"
                :inactive-value="false"
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            width="180"
            label="操作">
          <template slot-scope="scope">
            <!--    查看数据列表按钮      -->
            <el-button type="primary" plain icon="el-icon-chat-dot-round" circle size="small"
                       @click="view(scope.row)"></el-button>
            <!--          -->
            <el-button type="primary"
                       @click="reduction(scope.row.id)">还原</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 查看数据列表弹窗 -->
      <el-dialog :visible.sync="viewPop">
        <el-form :model="itemTableData1">
          <el-form-item label="编号" style="width: 300px">
            <el-input v-model="itemTableData1.itemCode"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" style="width: 300px">
            <el-input v-model="itemTableData1.itemName"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" style="width: 300px">
            <el-select v-model="itemTableData1.itemCategory" >
              <el-option
                  v-for="users in list1"
                  :key="users.id"
                  :value="users.id"
                  :label="users.name"
                  disabled
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品栏目" style="width: 300px">
            <el-select v-model="itemTableData1.itemColumn" >
              <el-option
                  v-for="users in list"
                  :key="users.id"
                  :value="users.id"
                  :label="users.ccname"
                  disabled
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button @click="back">返回</el-button>
      </el-dialog>
      <!--编辑商品-->
      <el-dialog :visible.sync="viewPop1">
        <el-form :model="itemTableData1">
          <el-form-item label="编号" style="width: 300px">
            <el-input v-model="itemTableData1.itemCode"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" style="width: 300px">
            <el-input v-model="itemTableData1.itemName"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" style="width: 300px">
            <el-select v-model="itemTableData1.itemCategory">
              <el-option
                  v-for="users in list1"
                  :key="users.id"
                  :value="users.id"
                  :label="users.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品栏目" style="width: 300px">
            <el-select v-model="itemTableData1.itemColumn" >
              <el-option
                  v-for="users in list"
                  :key="users.id"
                  :value="users.id"
                  :label="users.ccname"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button @click="updateBrand1">确定</el-button>
        <el-button @click="back">返回</el-button>
      </el-dialog>
    </div>
    <el-dialog :visible.sync="viewType" width="500px">
      <el-form :model="{viewTypes}">
        <el-form-item label="分类" style="width: 300px" v-for="item in viewTypes">
          <br> {{item.namel2}} <br>{{item.namel1}}
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="viewComments" @close="back">
      <el-form :model="commentLists">
        <el-form-item label="商品名称" style="width: 300px">
          <span v-text="commentLists.itemName"></span>
        </el-form-item>
        <el-form-item label="评论人数" style="width: 300px">
          <span v-text="commentLists.num"></span>
        </el-form-item>
        <span>
          综合评分：
          <el-rate
              v-model="average"
              disabled
              show-score
              text-color="#ff9900"
          >
          </el-rate>
        </span>
      </el-form>
      <el-table
          :data="commentList"
          style="width: 700px;">
        <el-table-column
            prop="id"
            label="序号"
        >
        </el-table-column>
        <el-table-column
            prop="userName"
            label="用户名称"
        >
        </el-table-column>
        <el-table-column
            prop="comments.commentTime"
            label="评论时间"
            width="160px"
        >
        </el-table-column>
        <el-table-column
            prop="comments.commentContent"
            label="评论内容"
            width="150px"
        >
        </el-table-column>
        <el-table-column
            prop="buyNumber"
            label="购买数量"
        >
        </el-table-column>
        <el-table-column
            prop="score"
            label="商品评分"
        >
        </el-table-column>
      </el-table>
      <el-button @click="back">返回</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Item",
  data(){
    return{
      list1:[],
      list:[],
      viewComments:false,
      average:0,//平均数
      stale:1,
      aaa:true,
      bbb:false,
      viewPop1:false,
      commentList:[],
      commentLists:[],
      viewPop:false,//查看数据列表弹窗
      brandName:"",//这块是搜索框
      comments:[],//根据id查看评论
      value: '',//商品上架下架状态
      itemTableData:[],//商品表格信息
      itemTableData1:{},//商品表格信息
      viewType:false,
      viewTypes:[],
      con:false,
      options: [{
        value: '1',
        label: '已上架'
      }, {
        value: '0',
        label: '已下架'
      }],

    }
  },
  methods:{
    reduction(id){
      this.$axios({
        url:"item/reduction",
        method:"get",
        params:{id:id}
      })
      location.reload()
    },
    List(){
      this.$axios.get("item/list").then(res=>{
        this.list = res.data.data
      })
    },
    List1(){
      this.$axios.get("item/list1").then(res=>{
        this.list1 = res.data.data
      })
    },
    updateBrand(row){
      this.viewPop1 = true
      this.itemTableData1 = {...row}
    },
    updateBrand1(){
      this.$axios.post("item/updateList",this.itemTableData1)

      location.reload()

    },
    aa(){
      if (this.aaa == true){
        this.aaa
      }else{
        this.aaa = !this.aaa
        this.bbb = !this.bbb
        this.stale = 1
        this.$axios({
          url:"item/getAllItem",
          method:"get",
          params:{
            brandName:this.brandName,
            status:this.stale
          }
        }).then(res=>{
          this.itemTableData = res.data.data;
        })
      }
    },

    bb(){
      if (this.bbb == false){
        this.bbb = !this.bbb
        this.aaa = !this.aaa
        this.stale = 0
        this.$axios({
          url:"item/getAllItem",
          method:"get",
          params:{
            brandName:this.brandName,
            status:this.stale
          }
        }).then(res=>{
          this.itemTableData = res.data.data;
        })
      }else{
        this.bbb = true
      }
    },
    back(){
      this.viewComments = false
      this.average = 0
      this.viewPop = false
    },
    viewComment(row){
      let viewBook = { ...row };
      this.commentLists = viewBook;
      this.$axios({
        url:"item/viewComment",
        method:"get",
        params:{
          id:row.id,
        }
      }).then(res=>{
        this.commentList = res.data.data;
        //取平均数
        for (var i =0; i<this.commentList.length;i++){
          this.average += this.commentList[i].score/this.commentList.length
        }
        // this.average =  this.average.toFixed(1)
        this.average =  parseFloat(this.average.toFixed(2))
      })

      this.viewComments = true
    },
    commodity(row){//根据id查看商品分类
      this.$axios({
        url:"item/getTypeById",
        method:"get",
        params:{
          id:row.id,
        }
      }).then(res=>{
        this.viewTypes = res.data.data;
        console.log(res.data.data)
      })
      this.viewType = true
    },

    getAllItem(){//商品列表全查
      this.$axios({
        url:"item/recoveryList",
        method:"get",
        params:{
          brandName:this.brandName,
          status:this.stale
        }
      }).then(res=>{
        this.itemTableData = res.data.data;
      })
    },

    //开关方法
    alterSwitch(row) {
      console.log(row)
      //请求方式为post
      this.$axios.post("/item/alterSwitch",
          {
            id: row.id,
            status: row.status
          }).then(res=>{
        this.$message({
          type: 'success',
          message: '你成功修改了显示!'
        });
      })
    },
    //删除方法
    delItem(id){
      this.$confirm('确定要删除该商品吗？', {
        confirmButtonText: '是的',
        cancelButtonText: '稍等',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: "get",
          url: "/item/delItem",
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.getAllItem()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //查看数据列表
    view(row){
      this.viewPop = true;//查看数据列表弹窗打开
      this.itemTableData1 = {...row};
    },
  },
  created() {
    this.getAllItem();
    this.List1();
    this.List();
  }
}
</script>

<style scoped>
.el-row1{
  font-size: 20px;

}
.col1{
  width: 100px;
  height: 70px;
  background: #FFFFFF;
  padding-top:18px;
  margin-left: 10px;
}
.col2{
  width: 100px;
  height: 70px;
  background: #eeeeee;
  margin-left: 20px;
  padding-top:18px;
}


</style>
